<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="fr btn-group" id="ttt">
        <el-button-group>
          <el-button type="primary" size="mini" class="el-button-toolbar-mini" @click="addCrtorg()">
            <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增
          </el-button>
        </el-button-group>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="roleId"
            placeholder="请输入"
            size="mini"
            style="width:100%"
            @keyup.enter.native="handleFilter"
          >
            <template slot="prepend">用户名</template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-input
            v-model="roleName"
            placeholder="请输入"
            size="mini"
            style="width:100%"
            @keyup.enter.native="handleFilter"
          >
            <template slot="prepend">姓名</template>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            size="mini"
            class="el-button-toolbar-mini"
            @click="handleFilter"
            :disabled="visibleButton"
          >
            <i class="fa fa-search" aria-hidden="true"></i>&nbsp;查询
          </el-button>
        </el-col>
      </el-row>
    </div>
    <el-table
      ref="multipleTable"
      v-loading="listLoading"
      :max-height="tableHeight"
      :data="list"
      element-loading-text="loading"
      row-key="funcId"
      style="margin-top:10px"
      fit
      border
      stripe
      highlight-current-row
      @select-change="handleSelectChange"
      @row-click="handleRowlickChange"
    >
      <el-table-column label="序号" width="70">
        <template scope="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" property="userId"></el-table-column>
      <el-table-column label="姓名" property="userName"></el-table-column>
     <el-table-column prop="status" label="状态" :show-overflow-tooltip="show">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusFilter">{{row.status}}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <span class="operation-btn" @click="editMenu(row)">编辑</span>
          <span class="operation-btn" @click="deleteMenu(row)">删除</span>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listQuery.currentPage"
      :page-sizes="pageSizes"
      :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align:right"
    ></el-pagination>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="600px"
      :close-on-click-modal="modalClose"
    >
      <el-form
        ref="menuform"
        :model="form"
        :rules="rules"
        label-position="left"
        label-width="100px"
        size="mini"
      >
        <el-form-item label="工号" prop="userId">
          <el-input v-model="form.userId" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="中心名称" prop="orgName">
          <el-select
            v-model="form.center"
            placeholder="请选择中心"
            style="width:40%;margin-right:20px"
            size="mini"
            clearable
            :filterable="true"
            reserve-keyword
            @visible-change="change"
            @change="change0"
          >
            <el-option
              v-for="item in centerOption"
              :key="item.orgCode"
              :label="item.orgName"
              :value="item.orgCode"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.orgName"
            placeholder="请选择单中心"
            no-data-text="请先选择中心"
            style="width:40%;margin-right:20px"
            size="mini"
            clearable
            :filterable="true"
            reserve-keyword
          >
            <el-option
              v-for="item in centerOptions"
              :key="item.orgCode"
              :label="item.orgName"
              :value="item.orgCode"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible=false">关闭</el-button>
        <el-button type="primary" size="mini" @click="menuSave()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { validLetters, validNumber } from "@/utils/validate";
// import { values } from 'mock/user';
export default {
  components: {},
  filters: {
    statusFilter(status) {
      const statusMap = {
        running: "success",
        lock: "gray",
        stop: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    const validMenuCode = (rule, value, callback) => {
      if (value == 0 || value == undefined) {
        callback();
      }
      //   else{
      //       queueMicrotask({funcCode:value}).then((res)=>{
      //          if(res.data.num==0 || this.dialogStatus=="edit"){
      //              callback
      //          }else{
      //              callback(new Error("菜单编码已存在，请重新输入"))
      //          }
      //       })
      //   }
    };
    return {
      listLoading: false,
      disabled: false,
      dialogIconVisible: false,
      roleName: "",
      roleId: "",
      centerOption: [
        {orgCode:'1',orgName:'研发中心'},
        {orgCode:'2',orgName:'研发中心'}
      ],
      centerOptions: [
        {orgCode:'1',orgName:'公司应用研发中心'},
        {orgCode:'2',orgName:'个人应用研发中心'}
      ],
      list: [
        {
          userId: "000014",
          userName: "胡兵",
          status: "running",
        },
        {
          userId: "342132",
          userName: "静静",
          status: "lock",
        },
         {
          userId: "325311",
          userName: "是啥",
          status: "stop",
        },
      ],
      funcId: "",
      tableHeight:
        (window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight) -
        this.$store.state.settings.tagViewHeight -
        130,
      listQuery: {
        funName: "",
        funCode: "",
      },
      visibleButton: false,
      modalClose: false,
      multipleSelection: [],
      rowClickSelection: null,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        add: "菜单-新增",
        edit: "菜单-编辑",
        view: "菜单-查看",
      },
      //   dialogFormVisible: false,
      form: {
        userId: "",
        orgName: "",
        center: "",
      },
      rules: {
        userId: [
          { required: true, message: "工号必填", trigger: "blur" },
          { max: 120, message: "工号长度不能超过120字符", trigger: "blur" },
        ],
      },
      pageSizes: [20, 40, 60, 80],
      total: 44,
      listQuery: {
        pageSize: 20,
        currentPage: 1,
      },
    };
  },
  watch: {
    //    tableHeight(val){
    //        if(!this.timer){
    //            this.tableHeight=val
    //            this.timer=true
    //            const that=this;
    //            setTimeout(function () {
    //                this.timer=false
    //            },(400))
    //        }
    //    }
  },
  //   created(){
  //       this.fetchData(this.listQuery)
  //   }
  mounted() {
    // this.change()
    window.onresize = () => {
      return (() => {
        const tmp =
          window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight;
        this.tableHeight = tmp - this.$store.state.settings.tagViewHeight - 115;
      })();
    };
  },
  methods: {
    change() {
      // selectOrg().then((res)=>{
      //   this.centerOption=res.data?res.data:[]
      // })
    },
    change0() {
      this.form.orgName = "";
      // selectOrg({tem:this.from.center}).then((res)=>{
      //   this.centerOptions=res.data?res.data:[]
      // })
    },
    // fetchData() {
    //   this.listLoading = true;
    //   this.visibleButton = true;
    //   query({currentPage:this.listQuery.currentPage,pageSize:this.listQuery.pageSize}).then((res) => {
    //     this.list = res.data;
    //     this.listLoading = false;
    //     this.visibleButton = false;
    //   });
    // },
    handleFilter() {
      // this.listQuery.currentPage=1
      // this.$refs.searchChild.initSeachValue()
    },
    resetMenu() {
      this.form = {
        userId: "",
        userName: "",
        orgName: "",
      };
    },
    addCrtorg() {
      this.resetMenu();
      this.dialogStatus = "add";
      this.disabled = false;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["menuform"].clearValidate();
      });
    },
    editMenu(row) {
      this.resetMenu();
      Object.keys(this.form).forEach((key) => {
        this.form[key] = row[key];
      });
      this.dialogStatus = "add";
      this.disabled = true;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["menuform"].clearValidate();
      });
      //   query({funcId:row.funcId}).then((res)=>{
      //       this.form=res.data
      //   })
    },
    deleteMenu(row) {
      this.$confirm("删除该行", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        var ids = [];
        ids.push(row.funcId);
        // delect({ids:ids}).then(()=>{
        //     this.fetchData()
        //     this.rowClickSelection=null
        //     this.$message({
        //         message:"删除成功",
        //         type:"成功"
        //     })
        // })
      });
    },

    handleSelectChange(val) {
      this.multipleSelection = val;
    },
    handleRowlickChange(val) {
      this.rowClickSelection = val;
    },
    selectIcon() {
      this.dialogIconVisible = true;
    },
    setImgValue(v) {
      this.form.icon = v;
      this.dialogIconVisible = false;
    },
    menuSave() {
      this.$refs["menuform"].validate((valid) => {
        if (valid) {
          if (this.dialogStatus == "add") {
            // addCrtorg().then((res)=>{
            //   if(res&&res.code==200){
            //     this.$message.success("添加成功")
            //     this.fetchDate()
            //     this.dialogFormVisible=false
            //   }
            // })
          } else {
            // addCrtorg1().then((res)=>{
            //   if(res&&res.code==200){
            //     this.$message.success("修改成功")
            //     this.fetchDate()
            //     this.dialogFormVisible=false
            //   }
            // })
          }
          // this.addCrtorg(this.form).then(() => {
          //   this.dialogFormVisible = false;
          //   this.handleFilter();
          //   var msg = "添加成功";
          //   if ((this.dialogStatus = "edit")) {
          //     msg = "修改成功";
          //   }
          //   this.$message({
          //     message: msg,
          //     type: "success",
          //   });
          // });
        }
      });
    },
    moreSearchShow() {
      this.$refs.searchPanel.toShow();
    },
    handleSizeChange(val) {
      this.listQuery.currentPage = val;
      //   this.fetchDate();
    },
    handleCurrentChange(val) {
      this.listQuery.pageSize = val;
      this.listQuery.currentPage = 1;
      //   this.fetchDate();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/btn.scss";
.fr {
  float: right;
}
.el-tag {
  height: 24px;
  line-height: 25px;
}
.filter-container {
  clear: both;
  overflow: hidden;
}
</style>
<style>
.el-table__expand-icon > .el-icon {
  margin: -8px 0 0 -8px;
}
.filter-container .el-row {
  width: 80%;
}
</style>